<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小红书笔记</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <style>
    :root {
      --primary: #f8e6ff;
      --accent: #9f7aea;
      --text: #333;
      --light: #fff;
      --highlight: #ff7eb6;
      --secondary: #ffefd5;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Noto Sans SC', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #f5f5f5;
      padding: 20px;
    }
    
    .container {
      position: relative;
      width: 100%;
      max-width: 600px;
    }
    
    .card-canvas {
      width: 100%;
      aspect-ratio: 3/4;
      background: linear-gradient(135deg, var(--primary), #f0e6ff);
      border-radius: 20px;
      padding: 40px 30px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(159, 122, 234, 0.1);
    }
    
    .title {
      font-size: 2.8rem;
      font-weight: 900;
      line-height: 1.2;
      margin-bottom: 30px;
      color: var(--text);
    }
    
    .highlight {
      color: var(--highlight);
      font-weight: 900;
      position: relative;
    }
    
    .highlight::after {
      content: '';
      position: absolute;
      bottom: 5px;
      left: 0;
      width: 100%;
      height: 8px;
      background-color: rgba(255, 126, 182, 0.3);
      z-index: -1;
    }
    
    .steps {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      margin-top: 30px;
    }
    
    .step {
      background: var(--light);
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    
    .step-number {
      font-size: 2.5rem;
      font-weight: 900;
      color: var(--accent);
      margin-bottom: 5px;
      line-height: 1;
    }
    
    .step-title {
      font-size: 1.4rem;
      font-weight: 700;
      margin-bottom: 5px;
      color: var(--text);
    }
    
    .step-desc {
      font-size: 1rem;
      color: #666;
    }
    
    .quote {
      position: relative;
      background: var(--secondary);
      border-radius: 16px;
      padding: 25px 20px;
      margin: 30px 0;
      font-size: 1.2rem;
      font-weight: 500;
      line-height: 1.5;
      color: var(--text);
      text-align: center;
    }
    
    .quote::before {
      content: '"';
      position: absolute;
      top: -15px;
      left: 20px;
      font-size: 60px;
      color: var(--accent);
      opacity: 0.3;
    }
    
    .icon {
      font-size: 1.8rem;
      color: var(--accent);
      margin-right: 10px;
      vertical-align: middle;
    }
    
    .circle-decoration {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      bottom: -100px;
      right: -70px;
      z-index: 0;
    }
    
    .circle-decoration-2 {
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: rgba(159, 122, 234, 0.1);
      top: -50px;
      left: -40px;
      z-index: 0;
    }
    
    .save-btn {
      position: absolute;
      right: -70px;
      top: 50%;
      transform: translateY(-50%);
      background: var(--accent);
      color: white;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      cursor: pointer;
      font-size: 1.2rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: all 0.3s ease;
    }
    
    .save-btn:hover {
      transform: translateY(-50%) scale(1.05);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="card-canvas" id="card">
      <div class="circle-decoration"></div>
      <div class="circle-decoration-2"></div>
      
      <h1 class="title">
        <span class="highlight">4步</span>戒掉坏习惯，成为<span class="highlight">理想</span>中的自己
      </h1>
      
      <div class="quote">
        改变习惯最有效的方法，不是盯着目标，而是聚焦于——你想"<span class="highlight">成为谁</span>"！
      </div>
      
      <div class="steps">
        <div class="step">
          <div class="step-number">01</div>
          <div class="step-title"><i class="icon fas fa-eye"></i>让它【显而易见】</div>
          <div class="step-desc">好习惯触发物放显眼处，坏习惯触发物藏起来</div>
        </div>
        
        <div class="step">
          <div class="step-number">02</div>
          <div class="step-title"><i class="icon fas fa-heart"></i>让它【有吸引力】</div>
          <div class="step-desc">好习惯与喜爱事物绑定，坏习惯增加心理成本</div>
        </div>
        
        <div class="step">
          <div class="step-number">03</div>
          <div class="step-title"><i class="icon fas fa-bolt"></i>让它【简便易行】</div>
          <div class="step-desc">好习惯降低门槛，坏习惯设置障碍</div>
        </div>
        
        <div class="step">
          <div class="step-number">04</div>
          <div class="step-title"><i class="icon fas fa-star"></i>让它【令人愉悦】</div>
          <div class="step-desc">好习惯即时奖励，坏习惯立刻痛苦</div>
        </div>
      </div>
    </div>
    
    <button class="save-btn" id="saveBtn">
      <i class="fas fa-download"></i>
    </button>
  </div>
  
  <script>
    document.getElementById('saveBtn').addEventListener('click', function() {
      html2canvas(document.getElementById('card')).then(function(canvas) {
        const link = document.createElement('a');
        link.download = '习惯养成4步法.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
      });
    });
  </script>
</body>
</html>